<template>
<!--首页-->
  <div>
    <headers></headers>
    <carousel></carousel>
    <div class="index_search">
      <div class="clearfix">
        <span class="pull-left label">证书查询</span>
        <div class="searchOut pull-left" >
          <Input prefix="ios-search" placeholder="请输入证书编号" v-model="certificateNum" class="inputSearch" size="large"/>
          <span class="searchBtn" @click="searchCertificate()">查询</span>
        </div>
      </div>
    </div>
    <div class="auto padding250">
      <div class="title">
        <p >新闻动态</p>
        <p >Information centres</p>
      </div>
      <ul class="new_ul clearfix font14">
        <li v-for="news in newses" @click.prevent.stop="detailNews(news.id)"><p>{{news.messageTitle}}</p>
          <span class="pull-right" v-if="news.updateTime">{{news.updateTime | timeFilter}}</span>
          <span class="pull-right" v-else>{{news.createTime | timeFilter}}</span>
        </li>
      </ul>
      <Button size='large' class="lookmore" @click="moreNewses" style="margin-top: 25px">查看更多<Icon type="ios-arrow-forward"></Icon></Button>
      <div class="title">
        <p >在线直播</p>
        <p >Live online</p>
      </div>
      <classes v-bind:lives="lives" v-bind:isVip="isVip"></classes>
      <Button size='large' class="lookmore" @click="moreLives">查看更多<Icon type="ios-arrow-forward"></Icon></Button>
      <!--<div class="title">
        <p>思享汇</p>
        <p>Sixianghui</p>
      </div>
      <ul class="zhibo_list">
        <li v-for="(course,index) in offcourses" @click="detail(index)">
          <div class="curse">
            <img :src="course.courseImage " alt="" width="280" height="150">
            <span>{{course.courseBeginDate}}</span>
          </div>
          <p>{{course.courseTitle}}</p>
          <div class="msg">
            <img :src="course.lecturerImg" alt="" width="28">{{course.lecturerName}}
            <span >￥{{course.coursePrice}}</span>
          </div>
        </li>
      </ul>
      <Button size='large' class="lookmore" @click="moreOffcourses">查看更多<Icon type="ios-arrow-forward"></Icon></Button>-->
      <div class="title">
        <p >线上课程</p>
        <p>Online programs</p>
      </div>
      <course v-bind:courses="courses" v-bind:online="online" v-bind:isVip="isVip" ></course>
      <Button size='large' class="lookmore" @click="moreCourses">查看更多<Icon type="ios-arrow-forward"></Icon></Button>
      <div class="title">
        <p>推荐导师</p>
        <p>Recommended Mentors</p>
      </div>
      <div class="carousel_daoshi clearfix">
        <div class="teacher" v-for="(lecturer,index) in lecturers" :key="index">
        <!--<div class="teacher" v-for="(lecturer,index) in lecturers" :key="index" @click.stop="lecturerList(lecturer.id)">-->
          <img :src="lecturer.lecturerImg" alt="" width="280" height="280">
          <p class="names">{{lecturer.lecturerName}}导师</p>
          <div class="des" >
            <p>{{lecturer.lecturerName}}导师</p>
            <p v-html="lecturer.summary"></p>
          </div>
        </div>
        <Button size='large' class="lookmore" @click="moreLecturer">查看更多<Icon type="ios-arrow-forward"></Icon></Button>
      </div>
    </div>
    <Modal v-model="modal" width="580" class-name="vertical-center-modal" footer-hide>
      <p slot="header" class="header">查询结果</p>
      <p class="resultNo"><span>无该证书相关信息，请检查证书编号</span></p>
    </Modal>
    <Modal v-model="modal1" width="70%" height = "70%" class-name="vertical-center-modal" footer-hide>
      <p slot="header" class="header">查询结果</p>
      <div width="50%" height = "50%" v-html="content" class="xieyi"></div>
    </Modal>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <asides></asides>
    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .xieyi{
    padding:20px;
    line-height:25px;
    text-align:left;
    font-size:14px
  }
  .header{
    text-align: center;
    font-size: 20px;
  }
  .resultNo{
    text-align: center;
    font-size: 15px;
  }
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .auto{
    .title{
      text-align: center;
      margin: 30px 0;
      p:first-child{
        font-size: 24px;
        color: #000;
      }
      p:last-child{
        font-size: 14px;
        color: #999;
      }
    }
    .new_ul li{
      float: left;
      width:calc(50% - 55px) ;
      line-height: 40px;
      text-align: left;
      cursor: pointer;
      padding-left: 15px;
      position: relative;
      p{
        max-width: 85%;
        float: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span{
        color: #999;
      }
      &:nth-child(2n-1){
        margin-right: 110px;
      }
      &:before{
        width: 5px;
        height: 5px;
        background-color: #000;
        content: '';
        position: absolute;
        left: 0;
        top:50%;
        margin-top: -2.5px;
      }
      &:hover{
        color: #9C7649;
      }
    }

    .zhibo_list{
      font-size: 0;
      padding-top: 30px;
      text-align: left;
      li{
        display: inline-block;
        width: 282px;
        border:1px solid #ddd;
        background-color: #fff;
        text-align: left;
        margin:0 24px 30px 0;
        .curse{
          position: relative;
          img{
            object-fit: cover;
          }
          span{
            background-color: #ff9900;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 3px 5px;
            position: absolute;
            bottom: 10px;
            left: 0;
          }
        }
        >p{
          font-size: 14px;
          color: #333;
          padding: 15px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .msg{
          font-size: 14px;
          color: #333;
          padding: 0px 15px 15px;
          img:not(.ren){
            border-radius: 50%;
            margin-right: 10px;
            vertical-align: middle;
          }
          .mianfei{
            color: #ff3300;
          }
        }
      }
      li:hover{
        transform: translateY(-10px);
        border-color: #957960;
        transition: all 0.3s;
        cursor: pointer;
      }
      li:nth-child(4n){
        margin-right: 0;
      }
    }
    .lookmore{
      font-size: 14px;
      color: #666;
      background-color: #f5f5f5;
      border-color: #ddd;
      height: 40px;
      width: 140px;
      margin: 10px 0 40px;
      .ivu-icon{
        margin-bottom: 2px;
        color: #999;
      }
    }

    .teacher{
      float: left;
      position: relative;
      margin-right: 26px;
      margin-bottom: 26px;
      width:  280px;
      height: 280px;
      cursor: pointer;
      .names{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: rgba(0,0,0,0.5);
        text-align: center;
        color: #fff;
        font-size: 14px;
        opacity: 1;
      }
      .des{
        opacity: 0;
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        color: #fff;
        text-align: left;
        padding: 0 21px;
        p:first-child{
          text-align: center;
          font-size: 14px;
          margin: 20px 0 15px;
        }
        p:last-child{
          font-size: 12px;
          line-height: 20px;
        }
      }
    }
    .teacher:hover{

      .des{
        opacity: 1;
        transition: all 0.3s;
      }
      .names{
        opacity: 0;
        transition: all 0.3s;
      }
    }
    .teacher:nth-child(4n){
      margin-right: 0;
    }
/*
    .demo-carousel{
      .teacher{
        float: left;
        position: relative;
        margin-right: 26px;
        width:  calc(25% - 19.7px);
        height: 280px;
        cursor: pointer;
        .names{
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 50px;
          line-height: 50px;
          background-color: rgba(0,0,0,0.5);
          text-align: center;
          color: #fff;
          font-size: 14px;
          opacity: 1;
        }
        .des{
          opacity: 0;
          background-color: rgba(0,0,0,0.5);
          width: 100%;
          height: 100%;
          position: absolute;
          top:0;
          left: 0;
          color: #fff;
          text-align: left;
          padding: 0 21px;
          p:first-child{
            text-align: center;
            font-size: 14px;
            margin: 20px 0 15px;
          }
          p:last-child{
            font-size: 12px;
            line-height: 20px;
          }
        }
      }
      .teacher:hover{

        .des{
          opacity: 1;
          transition: all 0.3s;
        }
        .names{
         opacity: 0;
          transition: all 0.3s;
        }
      }
      .teacher:last-child{
        margin-right: 0;
      }
    }*/

  }
  .index_search{
    background-color: #fff;
    box-shadow:0 3px 7px rgba(204,204,204,0.3);
    padding: 30px 0;

    .clearfix{
      margin: auto;
      width: 1000px;
    }
    .label{
      color: #000;
      font-size: 20px;
      margin:3px 20px 0 0;
    }
    .searchOut{
      width: 900px;
      height: 32px;
      display: table;
      overflow: hidden;
      border: 1px solid #957960;
      border-radius: 3px;
      .ivu-input{
        display: table-cell;
        border: 1px solid #957960;
        width: 100%;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #333;
        padding: 0 15px 0 5px;
      }

      .searchBtn{
        display: table-cell;
        width: 1px;
        height: 30px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        line-height: 30px;
        white-space: nowrap;
        padding: 0 15px;
        background-color: #957960;
        cursor: pointer;
        &:active{
          background-color: darken(#957960,3%);
        }
      }
    }
  }
</style>
<script type="text/ecmascript-6">
  import classes from '../template/live'
  import course from '../template/course'
  import asides from '../template/aside'
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import {indexWeb,indexLecturers,centreInfoWeb,searchByNum,downCertifite} from "../../http"
  import {getStore,setStore} from "../../storage";
  import {timeFilter} from "../../myFilters"
  export default {
        name: 'index',
        props: {},
        data() {
            return {
              content: '',
              modal: false,
              modal1: false,
              isSpinShow:false,                     //加载框
              loginshow1:false,
              certificateNum: '',//证书编号
              offcourses:[],                        //线下课列表
              lecturers : [],                       //推荐讲师列表
              lives : [],                           //直播列表
              courses : [],                        //推荐课程列表
              newses:[],                            //新闻列表
              pageNumber:1,
              online:1,                             //是否线上课程
              isVip:0,                              //是否是Vip
            };
        },
        methods: {
          //新闻详情
          detailNews(newsId){
            this.$router.push({
              name:'newsdetail',
              query:{
                newsId:newsId,
              }
            })
          },
          //更多新闻
          moreNewses(){
            this.$router.push({
              name:'news'
            })
          },
          //查看更多直播
          moreLives(){
              this.$router.push({
                  name:'zhibolist',
                  query:{ pageNumber: 1 },
              })
          },
          //查看更多推荐课程
          moreCourses(){
              this.$router.push({
                  name:'courselist',
                  query:{
                    coursetype: 0,
                    coursetypeId:'',
                  }
              })
          },
          //查看更多线下课程
          moreOffcourses(){
              this.$router.push({
                  name:'offcourselist',
              })
          },
          //查看更多推荐讲师
          moreLecturer(){
            this.$router.push({
              name:'lecRecomlist'
            })
          },
          //查看推荐讲师课程
          lecturerList(id){
              this.$router.push({
                  name:'lecturerlist',
                  query:{'lecturerId' : id},
              })
          },
          //线下课程详情
          detail(index){
            let offcourse = this.offcourses[index];
            this.$router.push({
              name:'offcoursedetail',
              query:{courseId:offcourse.id}
            })
          },
          //获取页面数据
          getIndex(){
            //获取首页数据
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              centreInfoWeb().then(res => {
                if (res.code !== 200) {
                }
                indexWeb({pageNumber:1,pageSize:10}).then(res => {
                  this.isSpinShow = false;
                  this.offcourses = res.data.offcourses;
                  this.lives = res.data.lives;
                  this.courses = this.getOncourses(res.data.courses);
                  this.newses = res.data.newses;
                  this.isVip = res.data.isVip;
                }).catch();
                //获取推荐导师
                //随机查询4个导师，pageSize为4
                indexLecturers({pageNumber: 1,pageSize:4}).then(res => {
                  //从走马灯改为标签不在使用
                  /*let list = res.data.lecturers.rows;
                  //讲师列表拆分
                  let arr = list; //要拆分的数组
                  let len = 4;  //每组元素个数
                  let a_len = arr.length;
                  let result = [];  //结果数组
                  for (let i = 0; i < a_len; i += len) {
                    let res = arr.slice(i, i + len);
                    result.push(res);
                  }
                  this.lecturers = result;*/
                  this.lecturers = res.data.lecturers.rows;
                }).catch();
              }).catch(() =>{
                this.isSpinShow = false;
              })
            }
          },
          //线上课程首页只显示前8个
          getOncourses(course){
            let num = 8;        //目前只显示8个课程
            let newArr = new Array();
            if(course.length !== undefined) {
              for (let i = 0; i < course.length && i < num; i++) {
                newArr.push(course[i]);
              }
            }
            return newArr;
          },
          searchCertificate(){
            let that = this
            this.isSpinShow = true;
            if(this.certificateNum == ''){
              this.isSpinShow = false;
              this.$Notice.warning({
                title: '证书查询提醒',
                desc: '请输入证书编号'
              });
              return;
            }
            centreInfoWeb().then(res => {
              if (res.code !== 200) {
                this.isSpinShow = false;
                that.$Notice.warning({
                  title: '证书查询提醒',
                  desc: '您还未登录，请登录'
                });
                return;
              }
              searchByNum({certificateNum : that.certificateNum}).then(res => {
                console.info(res)
                that.isSpinShow = false;
                if(res.data){
                  downCertifite({userCertifiId: res.data.id, userId: res.data.userId}).then(res => {
                    console.info(res)
                    that.content = res.replace("../", "http://test.cbstudy.com/base/")
                    that.modal1 = true
                    that.modal = false
                  })
                }else{
                  that.modal = true
                  that.modal1 = false
                  return;
                }
              });
            })
          }
        },
        created() {
          this.getIndex()
        },
        components: {
          asides,
          headers,
          footers,
          course,
          carousel,
          classes,
        }
    }
</script>
